<template>
  <div class="page" style="">
    <div class="print_title">任务再委托详情 · 禾美环保</div>
    <p class="title">基本信息</p>
    <a-row type="flex" justify="start" class="content" style="padding: 0 9px;">
      <PrintCol title="单据编号" :value="formData.billNo" />
      <PrintCol title="申请时间" :value="formData.createTime" />
      <PrintCol title="申请人" :value="filterMultiDictText(this.dictOptions['handlerId'], formData.handlerId + '')" />
      <PrintCol title="申请部门" :value="filterMultiDictText(this.dictOptions['handlerDeptId'], formData.handlerDeptId + '')" />
    </a-row>

    <p class="title" style="margin-top: 18px;">项目信息</p>
    <a-row type="flex" justify="start" class="content" style="padding: 0 9px;">
      <PrintCol title="项目名称" :value="formData.projectName" />
      <PrintCol title="项目编号" :value="formData.finalNo" />
      <PrintCol title="经营团队" :value="filterMultiDictText(this.dictOptions['teamName'], formData.teamName + '')" />
      <PrintCol title="项目承接人" :value="filterMultiDictText(this.dictOptions['undertaker'], formData.undertaker + '')" />
      <PrintCol title="立项日期" :value="formData.projectEstablishDate" />
      <PrintCol title="签订单位" :value="filterMultiDictText(this.dictOptions['signUnit'], formData.signUnit + '')" />
      <PrintCol title="业绩归属年度" :value="formData.year" />
      <PrintCol title="业主单位" :value="filterMultiDictText(this.dictOptions['ownerUnit'], formData.ownerUnit + '')" />
      <PrintCol title="联系人" :value="filterMultiDictText(this.dictOptions['contacts'], formData.contacts + '')" />
      <PrintCol title="联系方式" :value="formData.contactTel" />
      <PrintCol title="项目所在地址" :value="getAddress(formData.areaCode)" />
      <PrintCol title="项目详细地址" :value="formData.projectAddress" />
      <PrintCol title="项目来源" :value="filterMultiDictText(this.dictOptions['projectSource'], formData.projectSource + '')" />
      <PrintCol title="预计合同额(元)" :value="formData.estimatedContractAmount" />
      <PrintCol title="预计合同额大写" :value="formData.estimatedContractcapitalChineseAmount" />
      <PrintCol :span="24" title="立项事由及说明" :value="formData.establishReason" />
    </a-row>

    <p class="title" style="margin-top: 18px;">需分配任务信息</p>
    <a-row type="flex" justify="start" class="content" style="padding: 0 9px;">
      <PrintCol title="任务编号" :value="formData.taskNo" />
      <PrintCol title="业务分类" :value="formData.categoryName" />
      <PrintCol title="合同占比(%)" :value="formData.contractRate" />
      <PrintCol title="合同分配额(元)" :value="formData.contractAmount" />
      <PrintCol title="切割合同额(元)" :value="formData.cutContractAmount" />
      <PrintCol title="生产团队" :value="formData.productTeam_dictText" />
      <PrintCol title="需分配合同额(元)" :value="formData.separateContractAmount" />
      <PrintCol title="需分配切割合同额(元)" :value="formData.needCutContractAmount" />
      <PrintCol title="是否作废" :value="formData.isCancel_dictText" />
      <PrintCol :span="24" title="说明" :value="formData.reason" />
    </a-row>

    <a-row type="flex" justify="center" v-if="formData.redistributionDtList && formData.redistributionDtList.length">
      <a-col>
        <p class="title_table" style="margin-top: 18px;">新增分配任务信息</p>
      </a-col>
      <a-col :span="24">
        <a-table
          :columns="columns"
          :data-source="formData.redistributionDtList"
          bordered
          :pagination="false"
          size="small"
          :rowClassName="tableRowClass"></a-table>
      </a-col>
    </a-row>
    <a-row type="flex" justify="center" v-if="'progressNodeVoList' && 'progressNodeVoList'.length">
      <a-col>
        <p class="title_table" style="margin-top: 18px;">需分配款项信息</p>
      </a-col>
      <a-col :span="24">
        <a-table
          :columns="paymentProgressColumns"
          :data-source="progressNodeVoList"
          bordered
          :pagination="false"
          size="small"
          :rowClassName="tableRowClass"></a-table>
      </a-col>
    </a-row>

    <!-- 附件信息 -->
    <FileInfor :purchaseFile="attachment" v-if="attachment" title="项目附件信息"></FileInfor>
    <FileInfor :purchaseFile="file" v-if="file" title="任务附件信息"></FileInfor>
    <!-- 流程详情 -->
    <ProcessInfor v-if="formData.bpmStatus !== '1'" :dataHistorySource="dataHistorySource"></ProcessInfor>
  </div>
</template>
<script>
import { getAction } from '@/api/manage'
import FileInfor from '@/components/print/FileInfor.vue' // 审批历史流程列表组件
import ProcessInfor from '@/components/print/ProcessInfor.vue' // 审批历史流程列表组件
import address from '@/components/AddressChoice/address.js'
import { filterMultiDictText, initDictOptions } from '@/components/dict/JDictSelectUtil'

const PrintCol = {
  props: {
    span: {
      type: Number,
      default: 12
    },
    title: {
      type: String,
      default: ''
    },
    value: {
      // type: [String, Number],
      default: ''
    }
  },
  render() {
    const { title, value, span } = this
    return (
      <a-col span={ span }>
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap">{ title }:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{ value }</p>
          </a-col>
        </a-row>
      </a-col>
    )
  }
}

export default {
  props: {
    formBpm: {
      type: Boolean,
      default: false
    },
    formData: {
      type: Object,
      default: () => { },
      required: true
    },
    formDataHistory: {
      type: [Object, String],
      default: () => { },
      required: true
    }
  },
  computed: {
    attachment() {
      if (typeof this.formData.attachment === 'string') {
        return this.formData.attachment.split(',')
      }
      if (Array.isArray(this.formData.attachment)) {
        return this.formData.attachment
      }
      return []
    },
    file() {
      if (typeof this.formData.file === 'string') {
        return this.formData.file.split(',')
      }
      if (Array.isArray(this.formData.file)) {
        return this.formData.file
      }
      return []
    },
  },
  components: {
    FileInfor,
    ProcessInfor,
    PrintCol
  },
  data() {
    return {
      address,
      filterMultiDictText,
      dictOptions: {},
      dataHistorySource: [], // 流程列表
      progressNodeVoList: [], // 款项进度列表
      columns: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1;
          }
        },
        {
          title: '业务分类',
          align: 'center',
          dataIndex: 'categoryName'
        },
        {
          title: '合同占比(%)',
          align: 'center',
          dataIndex: 'contractRate'
        },
        {
          title: '合同分配额(元)',
          align: 'center',
          dataIndex: 'contractAmount'
        },
        {
          title: '切割合同额(元)',
          align: 'center',
          dataIndex: 'cutContractAmount'
        },
        {
          title: '生产团队',
          align: 'center',
          dataIndex: 'productTeam',
          customRender: (text) => {
            if (!text) {
              return ''
            } else {
              return filterMultiDictText(this.dictOptions['productTeam'], text + '')
            }
          }
        }
      ],
      // 款项进度
      paymentProgressColumns: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1;
          }
        },
        {
          title: '款项名称',
          align: 'center',
          dataIndex: 'paymentName'
        },
        {
          title: '款项节点说明',
          align: 'center',
          dataIndex: 'paymentDesc'
        },
        {
          title: '款项关联任务',
          align: 'center',
          dataIndex: 'taskId_dictText'
        },
        {
          title: '需分配款项金额(元)',
          align: 'center',
          dataIndex: 'isAllowDistributionMoney'
        },
        {
          title: '应收状态',
          align: 'center',
          dataIndex: 'shouldPayFlag',
          customRender: (text) => {
            if (text && text == 1) {
              return '已生成'
            } else {
              return '未生成'
            }
          }
        }
      ],
      url: {
        historyList: '/api/erpmng/act/task/processHistoryList', // 流程历史跟踪接口
        queryByIds: '/api/erp/administration/seal/erpSealCertificationChangeRecord/queryByIds2', // 印章列表
        // queryById: '/api/erp/omc/task/erpOmcTaskDistribution/queryById', // 獲取詳情
        erpOmcProjectQueryById: '/api/erp/omc/project/erpOmcProject/queryById',
        // queryPageList: '/api/erp/omc/project/erpOmcProjectTaskFinal/queryPageList'
        queryById: '/api/erp/task/erpOmcTaskRedistribution/queryById',
        // erpOmcProjectQueryById: '/api/erp/task/project/erpOmcProject/queryById',
        queryPageList: '/api/erp/omc/project/erpOmcProjectTaskFinal/queryPageList',
        generatedFormNumber: '/api/erp/base/generatedFormNumber'
      },
      cust_lxr: 'erp_omc_customer_manager_contact,lxr,id,del_flag=0 and main_id=0',
      // purchaseFile: [], // 附件
      // file: [] // 任务附件
    };
  },
  created() {
    this.initDictConfig()
  },
  watch: {
    formData: {
      async handler(val) {
        if (val) {
          this.cust_lxr = await 'erp_omc_customer_manager_contact,lxr,id,del_flag=0 and main_id=\'' + val.ownerUnit + '\'';
          // 获取项目编号
          this.getProjectNumber(val.projectId)
          this.getChildTableList(val.id)
          this.getTaskNumber(val.taskId)
          this.initDictConfig() // 字典值
          if (val && val.taskId && val.id) {
            this.getReceivablePaymentList(val.taskId, val.id, '2')
          }
          // if (val.attachment) {
          //   this.purchaseFile = val.attachment.split(',')
          // } else {
          //   this.purchaseFile = []
          // }
          // if (val.file) {
          //   this.file = val.file.split(',')
          // } else {
          //   this.file = []
          // }
        }
      },
      immediate: true
    },
    formDataHistory: {
      handler(val) {
        if (val) {
          this.getHistoryList()
        }
      },
      immediate: true
    }
  },
  methods: {
    // 获取列表
    getHistoryList() {
      var params = { processInstanceId: this.formDataHistory.procInsId };// 查询条件
      getAction(this.url.historyList, params).then(res => {
        if (res.success) {
          this.dataHistorySource = res.result.records || res.result
        }
      })
    },

    // 获取项目数据
    getProjectNumber(projectId) {
      if (projectId) {
        getAction(this.url.erpOmcProjectQueryById, { id: projectId }).then((res) => {
          if (res.success) {
            var event = res.result
            this.$set(this.formData, 'finalNo', event.finalNo) // 项目编号
          }
        })
      }
    },
    // 获取子表
    getChildTableList(mainId) {
      if (mainId) {
        getAction('/api/erp/task/erpOmcTaskRedistributionDt/queryByMainId', { mainId }).then(response => {
          this.$set(this.formData, 'redistributionDtList', response.result || [])
        })
      }
    },
    // 获取开始的款项进度列表
    getReceivablePaymentList(taskId, mainId, type) {
      var params = {
        taskId: taskId
      }
      if (mainId) {
        params.mainId = mainId
      }
      if (type) {
        params.type = type
      }
      this.receivablePaymentLoading = true
      getAction('/api/erp/task/erpOmcTaskRedistribution/queryReceivablePayment', params).then(res => {
        if (res.success) {
          if (res.result && res.result.length > 0) {
            res.result.map((value, index) => {
              res.result[index].taskId_dictText = '' // 首先款项关联任务字段默认为空
              // 遍历planTaskList数组赋值给taskId_dictText
              res.result[index].taskId_dictText = value.planTaskVoList && value.planTaskVoList.length ? (value.planTaskVoList.map((obj) => { return obj.categoryName }).join(',')) : '';
            })
            this.progressNodeVoList = res.result
          } else {
            this.progressNodeVoList = []
          }
        }
      }).finally(() => {
        this.receivablePaymentLoading = false
      })
    },
    // 获取项目数据
    getTaskNumber(taskId) {
      // // 获取任务编号
      if (taskId) {
        getAction(this.url.queryPageList, { id: taskId }).then((res) => {
          if (res.success) {
            if (res.result.records && res.result.records.length) {
              var event = res.result.records[0]
              this.$set(this.formData, 'taskNo', event.billNo) // 任务编号
            }
          }
        })
      }
    },

    initDictConfig() {
      // 人员名称
      initDictOptions('erp_employee_file,name,id').then((res) => {
        if (res.success) {
          this.$set(this.dictOptions, 'handlerId', res.result)
          this.$set(this.dictOptions, 'undertaker', res.result)
          this.$set(this.dictOptions, 'minister', res.result)
          this.$set(this.dictOptions, 'projectLeading', res.result)
          this.$set(this.dictOptions, 'approvalEngineer', res.result)
          this.$set(this.dictOptions, 'projectMember', res.result)
        }
      })
      // 部门名称
      initDictOptions('sys_depart,depart_name,id').then((res) => {
        if (res.success) {
          this.$set(this.dictOptions, 'handlerDeptId', res.result)
          this.$set(this.dictOptions, 'executeDepart', res.result)
        }
      })
      // 团队名称
      initDictOptions('erp_omc_team_manager,alias_name,id').then((res) => {
        if (res.success) {
          this.$set(this.dictOptions, 'teamName', res.result)
          this.$set(this.dictOptions, 'productTeam', res.result)
        }
      })
      // 单位
      initDictOptions('erp_company_files,file_name,id').then((res) => {
        if (res.success) {
          this.$set(this.dictOptions, 'signUnit', res.result)
        }
      })
      // 业主单位
      initDictOptions('erp_purchase_supplier,enterprise_name,id').then((res) => {
        if (res.success) {
          this.$set(this.dictOptions, 'ownerUnit', res.result)
        }
      })
      // 联系人
      initDictOptions(this.cust_lxr).then((res) => {
        if (res.success) {
          this.$set(this.dictOptions, 'contacts', res.result)
        }
      })
      // 项目来源
      initDictOptions('xmly_type').then((res) => {
        if (res.success) {
          this.$set(this.dictOptions, 'projectSource', res.result)
        }
      })
      // 任务类型
      initDictOptions('task_type').then((res) => {
        if (res.success) {
          this.$set(this.dictOptions, 'taskType', res.result)
        }
      })
      // 审批级别
      initDictOptions('approval_level').then((res) => {
        if (res.success) {
          this.$set(this.dictOptions, 'approvalLevel', res.result)
        }
      })
      // 行业类别
      initDictOptions('industry_category').then((res) => {
        if (res.success) {
          this.$set(this.dictOptions, 'industryCategory', res.result)
        }
      })
      // 复杂程度
      initDictOptions('industry_coefficient').then((res) => {
        if (res.success) {
          this.$set(this.dictOptions, 'complexity', res.result)
        }
      })
      // 是否出具报告
      initDictOptions('YES_OR_NO').then((res) => {
        if (res.success) {
          this.$set(this.dictOptions, 'isOutReport', res.result)
        }
      })
      // 是否出具报告
      initDictOptions('expense_accounting_method').then((res) => {
        if (res.success) {
          this.$set(this.dictOptions, 'expenseAccountingMethod', res.result)
        }
      })
    },

    getAddress(text) {
      if (!text) {
        return false
      }
      var areaList = text.split(',')
      var areaText = ''
      this.address.map(value => {
        if (areaList[0] && areaList[0] == value.code) {
          areaText = areaText + value.name + '/'
          if (value && value.children && value.children.length) {
            value.children.map(val => {
              if (areaList[1] && areaList[1] == val.code) {
                areaText = areaText + val.name + '/'

                if (val && val.children && val.children.length) {
                  val.children.map(va => {
                    if (areaList[2] && areaList[2] == va.code) {
                      areaText = areaText + va.name
                    }
                  })
                }
              }
            })
          }
        }
      })
      return areaText
    },

    tableRowClass(record, index) {
      if (index == 0) {
        return 'rowClass';
      }
      return ''
    }
  }
};
</script>
<style lang="less" scoped>
.page {
  background: #ffffff;
  padding: 19px 28px 0 28px;
  width: 750px;

  .print_title {
    font-size: 15px;
    font-family: Alibaba PuHuiTi 2.0;
    font-weight: normal;
    color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 9px;
  }

  .title {
    background: #EEEEEE;
    font-size: 13px;
    font-family: Alibaba PuHuiTi 2.0;
    font-weight: normal;
    color: #000000;
    padding: 11px 9px;
  }

  .content {
    font-size: 13px;
  }

  .title_table {
    font-size: 13px;
    font-family: Alibaba PuHuiTi 2.0;
    font-weight: normal;
    color: #000000;
  }
}

/deep/ .rowClass {
  font-size: 10px;
  font-family: Alibaba PuHuiTi 2.0;
  font-weight: normal;
  color: #000000;
}

/deep/ .ant-table-thead th {
  font-size: 10px;
  font-family: Alibaba PuHuiTi 2.0;
  font-weight: normal;
  color: #000000;
}

/deep/ .ant-table-thead tr {
  background: #EEEEEE;
}

/deep/ .ant-table-small>.ant-table-content>.ant-table-body {
  margin: 0 0px;
}

/deep/ .ant-table-body tr {
  font-size: 10px;
  font-family: Alibaba PuHuiTi 2.0;
  font-weight: normal;
  color: #000000;
}

/deep/ .ant-table-body tr td {
  word-wrap: break-word;
  word-break: break-all;
}

.content {
  font-size: 13px;
}</style>
